<template>

	<u-tabbar activeColor='#39cccc' :value="name" :placeholder="true" :fixed="true" :safeAreaInsetBottom="true">

		<u-tabbar-item class="tabbars" v-for="item in tabList" :key="item.id" :text="item.text" :name="item.name"
			@click='goPage(item.name)'>
			<view slot="active-icon" class="active_color" :class="item.active_icon">

			</view>
			<view slot="inactive-icon" :class="item.inactive_icon">

			</view>
		</u-tabbar-item>
	</u-tabbar>


</template>

<script>
	export default {
		name: "tabBarVue",
		data() {
			return {
				tabList: [{
						id: 1,
						text: "工作台",
						name: 'workbench',
						active_icon: 'cuIcon-shopfill',
						inactive_icon: 'cuIcon-shop'
					},
					{
						id: 2,
						text: "物料查找",
						name: 'inventorySearch',
						active_icon: 'cuIcon-formfill',
						inactive_icon: 'cuIcon-form'
					},
					// {
					// 	id: 3,
					// 	text: "看板",
					// 	name: 'dataBoard',
					// 	active_icon: 'cuIcon-rankfill',
					// 	inactive_icon: 'cuIcon-rank'
					// },
					{
						id: 4,
						text: "我的",
						name: 'my',
						active_icon: 'cuIcon-myfill',
						inactive_icon: 'cuIcon-my'
					}
				]
			};
		},
		props: {
			name: {
				type: String,
				default: 'shop'
			}
		},
		methods: {
			goPage(name) {
				// this.$emit('changtab', name)
				this.$store.dispatch('changeTab', name)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.active_color {
		color: #39cccc;
	}
</style>